﻿@{
    ViewBag.Title = "RequestProcess";
    Layout = "~/Views/Shared/_AdminLayout.cshtml";
}

<div class="breadcrumbs" id="breadcrumbs">
    <ul class="breadcrumb">
        <li>
            <i class="icon-home home-icon"></i>
            <a href="#">Home</a>

            <span class="divider">
                <i class="icon-angle-right arrow-icon"></i>
            </span>
        </li>

        <li>
            <a href="#">Request Process</a>
            <span class="divider">
                <i class="icon-angle-right arrow-icon"></i>
            </span>
        </li>

        <li>
            <a href="#">Make Request</a>
        </li>
    </ul>
    <!--.breadcrumb-->
</div>

<div class="page-content">
    <div class="row-fluid">
        <div class="span12">
            <!--PAGE CONTENT BEGINS-->
            <div class="row-fluid">
                <div class="span12">
                    <div class="widget-box">
                        <div class="widget-header widget-header-blue widget-header-flat">
                            <h4 class="lighter">Make an apply request</h4>
                        </div>
                        <div class="widget-body">
                            <div class="widget-main">
                                <div class="row-fluid">
                                    <div id="fuelux-wizard" class="row-fluid hide" data-target="#step-container">
                                        <ul class="wizard-steps">
                                            <li data-target="#step1" class="active">
                                                <span class="step">1</span>
                                                <span class="title">Supplier Information</span>
                                            </li>

                                            <li data-target="#step2">
                                                <span class="step">2</span>
                                                <span class="title">Choose Items</span>
                                            </li>

                                            <li data-target="#step3">
                                                <span class="step">3</span>
                                                <span class="title">Request Items</span>
                                            </li>

                                            <li data-target="#step4">
                                                <span class="step">4</span>
                                                <span class="title">Finish</span>
                                            </li>
                                        </ul>
                                    </div>

                                    <hr />

                                    <div class="step-content row-fluid position-relative" id="step-container">
                                        <div class="step-pane active" id="step1">
                                            <h3 class="header lighter block green">Enter the supplier information</h3>
                                            <form class="form-horizontal" id="sample-form">
                                                <div class="control-group info">
                                                    <label class="control-label" for="inputWarning">Name</label>
                                                    <div class="controls">
                                                        <span class="span6 input-icon input-icon-right">
                                                            <input class="span8" type="text" id="inputWarning" />
                                                        </span>
                                                    </div>
                                                </div>

                                                <div class="control-group info">
                                                    <label class="control-label" for="inputError">Address</label>
                                                    <div class="controls">
                                                        <span class="span6 input-icon input-icon-right">
                                                            <textarea class="span8 limited" data-maxlength="50" maxlength="100"></textarea>
                                                        </span>
                                                    </div>
                                                </div>

                                                <div class="control-group info">
                                                    <label class="control-label" for="inputInfo">Email</label>

                                                    <div class="controls">
                                                        <span class="span6 input-icon input-icon-right">
                                                            <input class="span8" type="text" id="inputInfo" />
                                                        </span>
                                                    </div>
                                                </div>

                                                <div class="control-group info">
                                                    <label class="control-label" for="inputSuccess">Phone Number</label>
                                                    <div class="controls">
                                                        <span class="span6 input-icon input-icon-right">
                                                            <input class="span8" type="text" id="inputSuccess" />
                                                        </span>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>

                                        <div class="step-pane" id="step2">
                                            <div class="row-fluid">
                                                <div class="widget-box transparent invoice-box">
                                                    <div class="widget-header widget-header-large">
                                                        <h3 class="lighter">Request Owner Information</h3>
                                                        <div class="widget-toolbar no-border invoice-info">
                                                            <span class="invoice-info-label">Request Num:</span>
                                                            <span class="red">RE123456</span>
                                                            <br />
                                                            <span class="invoice-info-label">Date:</span>
                                                            <span class="blue">07/18/2014</span>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="widget-main padding-24">
                                                    <div class="row-fluid">
                                                        <div class="row-fluid">
                                                            <div class="span6">
                                                                <div class="row-fluid">
                                                                    <div class="span12 label label-large label-info arrowed-in arrowed-right">
                                                                        <b>Supplier Information</b>
                                                                    </div>
                                                                </div>

                                                                <div class="row-fluid">
                                                                    <ul class="unstyled spaced">
                                                                        <li>
                                                                            <i class="icon-caret-right blue"></i>
                                                                            Name:
                                                                            <b>BigC Company</b>
                                                                        </li>

                                                                        <li>
                                                                            <i class="icon-caret-right blue"></i>
                                                                            Address: 
                                                                            <b>36 Bui Thi Xuan street, District 1, Ho Chi Minh City</b>
                                                                        </li>

                                                                        <li>
                                                                            <i class="icon-caret-right blue"></i>
                                                                            Email: 
                                                                            <b>vuongvt@imlink.co.jp</b>
                                                                        </li>

                                                                        <li>
                                                                            <i class="icon-caret-right blue"></i>
                                                                            Phone Number:
																		    <b class="red">(08) 3123 456</b>
                                                                        </li>
                                                                    </ul>
                                                                </div>
                                                            </div>
                                                            <!--/span-->

                                                            <div class="span6">
                                                                <div class="row-fluid">
                                                                    <div class="span12 label label-large label-success arrowed-in arrowed-right">
                                                                        <b>Buyer Info</b>
                                                                    </div>
                                                                </div>

                                                                <div class="row-fluid">
                                                                    <ul class="unstyled spaced">
                                                                        <li>
                                                                            <i class="icon-caret-right green"></i>
                                                                            Name:
                                                                            <b>Vo Tan Vuong</b>
                                                                        </li>

                                                                        <li>
                                                                            <i class="icon-caret-right green"></i>
                                                                            Address:
                                                                            <b>44/6 1A High Street, District 12, Ho Chi Minh City</b>
                                                                        </li>

                                                                        <li>
                                                                            <i class="icon-caret-right green"></i>
                                                                            Email:
                                                                            <b>vuongvt@imlink.co.jp</b>
                                                                        </li>
                                                                        <li>
                                                                            <i class="icon-caret-right green"></i>
                                                                            Phone Number:
                                                                            <b>(+84) 1666 057 515</b>
                                                                        </li>
                                                                    </ul>
                                                                </div>
                                                            </div>
                                                            <!--/span-->
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="widget-box transparent invoice-box">
                                                    <div class="widget-header widget-header-large">
                                                        <h3 class="lighter">List items choosen</h3>
                                                    </div>
                                                    <div class="space"></div>
                                                    <div class="row-fluid">
                                                        <table class="table table-striped table-bordered">
                                                            <thead>
                                                                <tr>
                                                                    <th class="center">No.</th>
                                                                    <th>Product</th>
                                                                    <th class="hidden-phone">Store</th>
                                                                    <th class="hidden-480">Quantity</th>
                                                                    <th>Total</th>
                                                                </tr>
                                                            </thead>
                                                            <tbody>
                                                                <tr>
                                                                    <td class="center">1</td>
                                                                    <td>
                                                                        <a href="#">google.com</a>
                                                                    </td>
                                                                    <td class="hidden-phone">1 year domain registration
                                                                    </td>
                                                                    <td class="hidden-480">--- </td>
                                                                    <td>$10</td>
                                                                </tr>

                                                                <tr>
                                                                    <td class="center">2</td>
                                                                    <td>
                                                                        <a href="#">yahoo.com</a>
                                                                    </td>
                                                                    <td class="hidden-phone">5 year domain registration
                                                                    </td>
                                                                    <td class="hidden-480">5% </td>
                                                                    <td>$45</td>
                                                                </tr>

                                                                <tr>
                                                                    <td class="center">3</td>
                                                                    <td>Hosting</td>
                                                                    <td class="hidden-phone">1 year basic hosting
                                                                    </td>
                                                                    <td class="hidden-480">10% </td>
                                                                    <td>$90</td>
                                                                </tr>

                                                                <tr>
                                                                    <td class="center">4</td>
                                                                    <td>Design</td>
                                                                    <td class="hidden-phone">Theme customization
                                                                    </td>
                                                                    <td class="hidden-480">50% </td>
                                                                    <td>$250</td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                    </div>

                                                    <div class="hr hr8 hr-double hr-dotted"></div>

                                                    <div class="row-fluid">
                                                        <div class="span5 pull-right">
                                                            <h4 class="pull-right">Total amount :
																<span class="red">$395</span>
                                                            </h4>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>

                                        <div class="step-pane" id="step3">
                                            <div class="row-fluid">
                                                <div class="widget-box transparent invoice-box">
                                                    <div class="widget-header widget-header-large">
                                                        <h3 class="lighter">Request Owner Information</h3>
                                                        <div class="widget-toolbar no-border invoice-info">
                                                            <span class="invoice-info-label">Request Num:</span>
                                                            <span class="red">RE123456</span>
                                                            <br />
                                                            <span class="invoice-info-label">Date:</span>
                                                            <span class="blue">07/18/2014</span>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="widget-main padding-24">
                                                    <div class="row-fluid">
                                                        <div class="row-fluid">
                                                            <div class="span6">
                                                                <div class="row-fluid">
                                                                    <div class="span12 label label-large label-info arrowed-in arrowed-right">
                                                                        <b>Supplier Information</b>
                                                                    </div>
                                                                </div>

                                                                <div class="row-fluid">
                                                                    <ul class="unstyled spaced">
                                                                        <li>
                                                                            <i class="icon-caret-right blue"></i>
                                                                            Name:
                                                                            <b>BigC Company</b>
                                                                        </li>

                                                                        <li>
                                                                            <i class="icon-caret-right blue"></i>
                                                                            Address: 
                                                                            <b>36 Bui Thi Xuan street, District 1, Ho Chi Minh City</b>
                                                                        </li>

                                                                        <li>
                                                                            <i class="icon-caret-right blue"></i>
                                                                            Email: 
                                                                            <b>vuongvt@imlink.co.jp</b>
                                                                        </li>

                                                                        <li>
                                                                            <i class="icon-caret-right blue"></i>
                                                                            Phone Number:
																		    <b class="red">(08) 3123 456</b>
                                                                        </li>
                                                                    </ul>
                                                                </div>
                                                            </div>
                                                            <!--/span-->

                                                            <div class="span6">
                                                                <div class="row-fluid">
                                                                    <div class="span12 label label-large label-success arrowed-in arrowed-right">
                                                                        <b>Buyer Info</b>
                                                                    </div>
                                                                </div>

                                                                <div class="row-fluid">
                                                                    <ul class="unstyled spaced">
                                                                        <li>
                                                                            <i class="icon-caret-right green"></i>
                                                                            Name:
                                                                            <b>Vo Tan Vuong</b>
                                                                        </li>

                                                                        <li>
                                                                            <i class="icon-caret-right green"></i>
                                                                            Address:
                                                                            <b>44/6 1A High Street, District 12, Ho Chi Minh City</b>
                                                                        </li>

                                                                        <li>
                                                                            <i class="icon-caret-right green"></i>
                                                                            Email:
                                                                            <b>vuongvt@imlink.co.jp</b>
                                                                        </li>
                                                                        <li>
                                                                            <i class="icon-caret-right green"></i>
                                                                            Phone Number:
                                                                            <b>(+84) 1666 057 515</b>
                                                                        </li>
                                                                    </ul>
                                                                </div>
                                                            </div>
                                                            <!--/span-->
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="widget-box transparent invoice-box">
                                                    <div class="widget-header widget-header-large">
                                                        <h3 class="lighter">List items choosen</h3>
                                                    </div>
                                                    <div class="space"></div>

                                                    <div class="row-fluid">
                                                        <table class="table table-striped table-bordered">
                                                            <thead>
                                                                <tr>
                                                                    <th class="center">No.</th>
                                                                    <th>Product</th>
                                                                    <th class="hidden-phone">Store</th>
                                                                    <th class="hidden-480">Quantity</th>
                                                                    <th>Total</th>
                                                                    <th style="width: 40px"></th>
                                                                </tr>
                                                            </thead>
                                                            <tbody>
                                                                <tr>
                                                                    <td class="center">1</td>
                                                                    <td>
                                                                        <a href="#">google.com</a>
                                                                    </td>
                                                                    <td class="hidden-phone">1 year domain registration
                                                                    </td>
                                                                    <td class="hidden-480">2</td>
                                                                    <td>$10</td>
                                                                    <td class="td-actions">
                                                                        <div class="hidden-phone visible-desktop action-buttons">
                                                                            <a class="green" href="#itemInfor" data-toggle="modal">
                                                                                <i class="icon-pencil bigger-130"></i>
                                                                            </a>
                                                                            <a class="red" href="#">
                                                                                <i class="icon-trash bigger-130"></i>
                                                                            </a>
                                                                        </div>
                                                                    </td>
                                                                </tr>

                                                                <tr>
                                                                    <td class="center">2</td>
                                                                    <td>
                                                                        <a href="#">yahoo.com</a>
                                                                    </td>
                                                                    <td class="hidden-phone">5 year domain registration
                                                                    </td>
                                                                    <td class="hidden-480">3</td>
                                                                    <td>$45</td>
                                                                    <td class="td-actions">
                                                                        <div class="hidden-phone visible-desktop action-buttons">
                                                                            <a class="green" href="#">
                                                                                <i class="icon-pencil bigger-130"></i>
                                                                            </a>
                                                                            <a class="red" href="#">
                                                                                <i class="icon-trash bigger-130"></i>
                                                                            </a>
                                                                        </div>
                                                                    </td>
                                                                </tr>

                                                                <tr>
                                                                    <td class="center">3</td>
                                                                    <td>Hosting</td>
                                                                    <td class="hidden-phone">1 year basic hosting
                                                                    </td>
                                                                    <td class="hidden-480">4</td>
                                                                    <td>$90</td>
                                                                    <td class="td-actions">
                                                                        <div class="hidden-phone visible-desktop action-buttons">
                                                                            <a class="green" href="#">
                                                                                <i class="icon-pencil bigger-130"></i>
                                                                            </a>
                                                                            <a class="red" href="#">
                                                                                <i class="icon-trash bigger-130"></i>
                                                                            </a>
                                                                        </div>
                                                                    </td>
                                                                </tr>

                                                                <tr>
                                                                    <td class="center">4</td>
                                                                    <td>Design</td>
                                                                    <td class="hidden-phone">Theme customization
                                                                    </td>
                                                                    <td class="hidden-480">5</td>
                                                                    <td>$250</td>
                                                                    <td class="td-actions">
                                                                        <div class="hidden-phone visible-desktop action-buttons">
                                                                            <a class="green" href="#">
                                                                                <i class="icon-pencil bigger-130"></i>
                                                                            </a>
                                                                            <a class="red" href="#">
                                                                                <i class="icon-trash bigger-130"></i>
                                                                            </a>
                                                                        </div>
                                                                    </td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                    </div>

                                                    <div class="hr hr8 hr-double hr-dotted"></div>

                                                    <div class="row-fluid">
                                                        <div class="span5 pull-right">
                                                            <h4 class="pull-right">Total amount :
																<span class="red">$395</span>
                                                            </h4>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div id="itemInfor" class="modal hide fade" tabindex="-1">
                                                <div class="modal-header no-padding">
                                                    <div class="table-header">
                                                        <button type="button" class="close" data-dismiss="modal">×</button>
                                                        Item's information
                                                    </div>
                                                </div>

                                                <div class="modal-body overflow-visible">
                                                    <form class="form-horizontal" id="itemInforModal">
                                                        <div class="row-fluid">
                                                            <div class="control-group">
                                                                <label class="control-label" for="form-field-username">Name</label>
                                                                <div class="controls">
                                                                    <input type="text" placeholder="Name" value="">
                                                                </div>
                                                            </div>
                                                        </div>

                                                        <div class="row-fluid">
                                                            <div class="control-group">
                                                                <label class="control-label" for="form-field-username">Store</label>
                                                                <div class="controls">
                                                                    <input type="text" placeholder="Store" value="">
                                                                </div>
                                                            </div>
                                                        </div>

                                                        <div class="row-fluid">
                                                            <div class="control-group">
                                                                <label class="control-label" for="form-field-username">Quantity</label>
                                                                <div class="controls">
                                                                    <input type="text" placeholder="Quantity" value="">
                                                                </div>
                                                            </div>
                                                        </div>

                                                         <div class="row-fluid">
                                                            <div class="control-group">
                                                                <label class="control-label" for="form-field-username">Price</label>
                                                                <div class="controls">
                                                                    <input type="text" placeholder="Price" value="">
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </form>
                                                </div>

                                                <div class="modal-footer">
                                                    <button class="btn btn-small btn-danger pull-left" data-dismiss="modal">
                                                        <i class="icon-remove"></i>
                                                        Cancel
                                                    </button>

                                                    <button class="btn btn-small btn-primary pull-right" data-dismiss="modal">
                                                        <i class="icon-edit"></i>
                                                        Edit
                                                    </button>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="step-pane" id="step4">
                                            <div class="center">
                                                <h3 class="green">Congratulation!</h3>
                                                Your apply request is ready to send to Directory! Click finish to finish your process!
                                            </div>
                                        </div>
                                    </div>

                                    <hr />

                                    <div class="row-fluid wizard-actions">
                                        <button class="btn btn-prev">
                                            <i class="icon-arrow-left"></i>
                                            Prev
                                        </button>

                                        <button class="btn btn-success btn-next" data-last="Finish">
                                            Next
												<i class="icon-arrow-right icon-on-right"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(function () {
        $('[data-rel=tooltip]').tooltip();

        $('#fuelux-wizard').ace_wizard().on('change', function (e, info) {
        }).on('finished', function (e) {
            bootbox.dialog("Thank you! Your information was successfully saved!", [{
                "label": "OK",
                "class": "btn-small btn-primary",
            }]
            );
        }).on('stepclick', function (e) {
            //return false;//prevent clicking on steps
        });
    })
</script>
